<template>
  <div class="home-page">
    <el-row :gutter="20">
      <!-- 支付统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>今日支付总额</span>
              <el-icon><Money /></el-icon>
            </div>
          </template>
          <div class="stat-value">¥{{ todayPaymentAmount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>今日支付笔数</span>
              <el-icon><Document /></el-icon>
            </div>
          </template>
          <div class="stat-value">{{ todayPaymentCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>今日退款总额</span>
              <el-icon><Wallet /></el-icon>
            </div>
          </template>
          <div class="stat-value">¥{{ todayRefundAmount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>今日退款笔数</span>
              <el-icon><Files /></el-icon>
            </div>
          </template>
          <div class="stat-value">{{ todayRefundCount }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近支付订单 -->
    <el-card class="recent-orders">
      <template #header>
        <div class="card-header">
          <span>最近支付订单</span>
          <el-button type="primary" @click="$router.push('/payment/list')">查看全部</el-button>
        </div>
      </template>
      <el-table :data="recentPayments" style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">
            ¥{{ row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentType" label="支付方式" width="120">
          <template #default="{ row }">
            <el-tag :type="row.paymentType === 1 ? 'success' : 'primary'">
              {{ row.paymentType === 1 ? '支付宝' : '微信支付' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </el-card>

    <!-- 最近退款记录 -->
    <el-card class="recent-refunds">
      <template #header>
        <div class="card-header">
          <span>最近退款记录</span>
          <el-button type="primary" @click="$router.push('/refund/list')">查看全部</el-button>
        </div>
      </template>
      <el-table :data="recentRefunds" style="width: 100%">
        <el-table-column prop="refundNo" label="退款单号" width="180" />
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="amount" label="退款金额" width="120">
          <template #default="{ row }">
            ¥{{ row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getRefundStatusType(row.status)">
              {{ getRefundStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Money, Document, Wallet, Files } from '@element-plus/icons-vue'
import axios from 'axios'

// 统计数据
const todayPaymentAmount = ref(0)
const todayPaymentCount = ref(0)
const todayRefundAmount = ref(0)
const todayRefundCount = ref(0)

// 最近订单数据
const recentPayments = ref([])
const recentRefunds = ref([])

// 定时器
let timer = null

// 获取统计数据
const fetchStatistics = async () => {
  try {
    const response = await axios.get('/api/statistics/today')
    const data = response.data
    todayPaymentAmount.value = data.paymentAmount
    todayPaymentCount.value = data.paymentCount
    todayRefundAmount.value = data.refundAmount
    todayRefundCount.value = data.refundCount
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 获取最近支付订单
const fetchRecentPayments = async () => {
  try {
    const response = await axios.get('/api/payment/recent')
    recentPayments.value = response.data
  } catch (error) {
    console.error('获取最近支付订单失败:', error)
  }
}

// 获取最近退款记录
const fetchRecentRefunds = async () => {
  try {
    const response = await axios.get('/api/refund/recent')
    recentRefunds.value = response.data
  } catch (error) {
    console.error('获取最近退款记录失败:', error)
  }
}

// 获取支付状态类型
const getStatusType = (status) => {
  const types = {
    0: 'warning',  // 未支付
    1: 'success',  // 已支付
    2: 'danger'    // 已取消
  }
  return types[status] || 'info'
}

// 获取支付状态文本
const getStatusText = (status) => {
  const texts = {
    0: '未支付',
    1: '已支付',
    2: '已取消'
  }
  return texts[status] || '未知状态'
}

// 获取退款状态类型
const getRefundStatusType = (status) => {
  const types = {
    0: 'warning',  // 待处理
    1: 'success',  // 已退款
    2: 'danger'    // 已拒绝
  }
  return types[status] || 'info'
}

// 获取退款状态文本
const getRefundStatusText = (status) => {
  const texts = {
    0: '待处理',
    1: '已退款',
    2: '已拒绝'
  }
  return texts[status] || '未知状态'
}

// 定时刷新数据
const startAutoRefresh = () => {
  // 立即执行一次
  fetchStatistics()
  fetchRecentPayments()
  fetchRecentRefunds()
  
  // 每30秒刷新一次
  timer = setInterval(() => {
    fetchStatistics()
    fetchRecentPayments()
    fetchRecentRefunds()
  }, 30000)
}

onMounted(() => {
  startAutoRefresh()
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin-top: 10px;
}

.recent-orders,
.recent-refunds {
  margin-bottom: 20px;
}
</style> 